<script>
    // 进销存 产品管理表单
Vue.component('stock-product-form', {
    template: `
<el-dialog :visible.sync="dialogShow" width="600px" @close="closeModal" :close-on-click-modal	="false">
    <h3 slot="title">
        <span v-if="productForm.id">编辑</span>
        <span v-else>新增</span> 产品
    </h3>
    <el-alert
    title="操作提示"
    type="warning"
    description="产品添加完成后，点击选项卡“库存管理”、“入库” 把产品添加到相应的仓库里！"
    :closable="false"
    show-icon>
  </el-alert>
    <div style="height:20px;"></div>
    <el-form ref="form" :rules="formRules" :model="productForm" label-width="80px">
    <el-form-item v-if="productForm.id" class="hidden">
    <el-input v-model="productForm.id" disabled></el-input>
    </el-form-item>
    <el-form-item prop="title" label="产品名称">
    <el-input autocomplete="off" v-model="productForm.title" placeholder="请输入产品名称"></el-input>
    </el-form-item>
    <el-form-item prop="spec" label="规格型号">
    <el-input autocomplete="off" v-model="productForm.spec" placeholder="描述产品型号规格"></el-input>
    </el-form-item>
    <el-form-item prop="unit" label="单位">
     <el-select v-model="productForm.unit" placeholder="请选择单位">
        <el-option
          v-for="item in unitList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
 <el-form-item prop="sale_price" label="销售价">
    <el-input autocomplete="off" v-model="productForm.sale_price" placeholder="请输入销售价" type="number" step="0.01"></el-input>
    </el-form-item>
 <el-form-item prop="purchase_price" label="采购价">
    <el-input autocomplete="off" v-model="productForm.purchase_price" placeholder="请输入采购价" type="number" step="0.01"></el-input>
    </el-form-item>
 <el-form-item prop="cost_price" label="成本价">
    <el-input autocomplete="off" v-model="productForm.cost_price" placeholder="成本价用来核算库存余额" type="number" step="0.01"></el-input>
    </el-form-item>
 <el-form-item prop="memo" label="备注">
    <el-input autocomplete="off" v-model="productForm.memo" placeholder="请输入备注"></el-input>
    </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
    <el-button @click="closeModal">取 消</el-button>
    <el-button type="primary" @click="handleFormSubmit">确 定</el-button>
    </div>
</el-dialog>
    `,
    props: ['dialog-show','form-row'],
    computed: {
        currentTallyId() {
            return this.$store.state.currentTallyId
        },
        currentTally () {
            return this.$store.state.currentTally
        },

    },
    watch: {
        dialogShow:{
            handler (newVal) {},
            deep:true,
            immediate: true
        },
        formRow: {
            handler (newVal) {
                this.productForm = newVal
            },
            deep:true,
            immediate: true
        }
    },
    data:function(){
        return {
            unitList:[],
            productForm:{},
            formRules:{
                title: [
                    { required: true, message: '请输入产品名称', trigger: 'blur' }
                ],
                unit: [
                    { required: true, message: '请选择单位', trigger: 'blur' }
                ],
            },
        }
    },
    methods:{
         getUnList() {
            let that = this;

             that.unitList = [];
             axios.get('/api/product-stock-case/all',{
                 method: 'get',
                 headers: {'token': loginToken},
                 params: {
                     tally_id:that.currentTallyId
                 }
             }).then((res)=>{
                 let data = res.data.data;
                 data.forEach(item=>{
                     let tnp = {label:item['product_case_name'],value:item['product_case_name']}
                     that.unitList.push(tnp)
                 });
             })


            // let def = ['个','件','台','箱','瓶','平方','桶','把','套','副','只','KG']
            // def.forEach(item=>{
            //     let tnp = {label:item,value:item}
            //     retList.push(tnp)
            // });
            // return retList
        },
        closeModal(){
            this.$emit('modalClose','')
        },
        handleFormSubmit(){
            let that = this
            let postUrl;
            if(that.productForm.id) {
                postUrl = '/api/stock-product/edit'
            }else{
                postUrl = '/api/stock-product/add'
            }
            that.productForm.tally_id = that.currentTallyId
            axios.post(postUrl,that.productForm,{
                headers: {'token': loginToken},
            }).then(function(res) {
                if(res.data.status === 'success'){
                    that.$message({
                        type: 'success',
                        message: '数据保存成功'
                    });
                    that.$emit('modalClose','refresh')
                }else{
                    that.$message({
                        type: 'error',
                        message: '解析数据失败:'+res.data.error_message
                    })
                }
            })
        },
    }
})
</script>
